<template>
    <div class="search">
        <my-head title="搜索">
            <template #left>
                <div class="back" @click="gotobackall">
                    <van-icon name="revoke" size="18" color="#ff5f16" />
                </div>
            </template>
        </my-head>
        <div class="search">
            <van-search
                v-model="keyword"
                show-action
                placeholder="输入影院名称或者地址"
                @search="onSearch"
                @cancel="onCancel"
            />
        </div>
        <div class="near" v-if="toggle">
            <p class="title">离你最近</p>
            <div class="reclist">
                <div v-for="(l,i) in recommendList" class="citem" :key="i">
                    <router-link class="link" :to='{name:"cinema-detail",params:{
                        cinemaId:l.cinemaId
                    }}'> {{l.name }}</router-link>
                </div>
            </div>
        </div>
        <div v-else>
            <clist v-if="list.length>0" :list="list"></clist>
             <div v-else class="nodata">
                <van-empty description="没有找到匹配的影院" />
            </div>
        </div>
    </div>
</template>


<script>
export default {
    data(){
        return {
            recommendList:[],
            keyword:'', // 搜索关键字 
            toggle:true,
            list:[]
        }
    },
    methods:{
        async getrecommend(){
            let res = await this.$ajax.getMaizuo({
                cityId:this.city.cityId,
            },{
                'X-Host': 'mall.film-ticket.cinema.recommend'
            })
            this.recommendList = res.data.cinemas;
        },
        onSearch(value){
            console.log(value)
            this.toggle = false;
            // 过滤
            this.list = this.cinemaList.filter(item=>(item.name.indexOf(value)>-1 || item.address.indexOf(value)>-1 ))
        },
        onCancel(){
            this.toggle = true;
            this.keyword = ''
        }
    },
    mounted(){
        if(this.city){
            // 请求当前城市的电影数据 
            this.getCinemaList({
                cityId:this.city.cityId
            })
            this.getrecommend()
        }else{
            this.$dialog.alert({
                title: '选择城市',
                message: '请去定位选择你的所在城市',
            }).then(() => {
            // on close
                this.$router.push({name:'city'})
            });
        }
    }
}
</script>


<style lang="scss" scoped>
.near{
    padding:5px 15px;
    .title{
        font-size: 13px;
        line-height: 13px;
        color: #bdc0c5;
        margin: 18px 0;
    }
    .reclist{
        display:flex;
        flex-wrap: wrap;
        .citem{
            text-align: center;
            padding-bottom: 10px;
            padding-right: 10px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            .link{
                    display: block;
                    height: 30px;
                    background-color: hsla(0,0%,95.7%,.6);
                    line-height: 14px;
                    border-radius: 3px;
                    -webkit-box-sizing: border-box;
                    box-sizing: border-box;
                    font-size: 13px;
                    padding: 8px 12px;
                    color:#333;
            }
        }
    }
}
</style>